<template>
  <div class="container-pt">
    <van-nav-bar fixed title="修改用户资料" @click-left="$router.back()"  left-arrow/>
    <van-cell is-link  title="头像" @click="updateImg" >
      <van-image
        width="30"
        height="30"
        round
        :src="'http://124.223.14.236:8060/' + userData.icon"
      />
    </van-cell>
    <van-cell-group>
      <van-uploader ref="pic" v-model="fileList" :max-count="1" class="uploader" :after-read="afterRead" style="display:none"/>
        <van-field  label="昵称"   v-model="userData.username" placeholder="请输入用户名" />
        <van-field  label="手机号" v-model="userData.mobile" placeholder="请输入用手机号" />
        <van-field  label="性别"   v-model="userData.sex" placeholder="请输入性别" />
        <van-field  label="出生年月" v-model="userData.birthday" placeholder="请输入出生年月" />
        <van-field  label="家庭住址" v-model="userData.address" placeholder="请输入家庭住址" />
        <van-field  label="个人留言" v-model="userData.notes" placeholder="请输入个人留言" />
        <van-button type="primary" style="width:100%;margin-top:50px" @click="submit">确定</van-button>
    </van-cell-group>
    <!-- <van-cell is-link  value="admin" title="昵称"></van-cell>
    <van-cell  is-link value="18868816185" title="手机号"></van-cell>
    <van-cell is-link  value="男" title="性别"></van-cell>
    <van-cell is-link value="2011-12-12"  title="出生年月"></van-cell>
    <van-cell is-link  label="安徽省合肥市瑶海区闽商国贸"  title="家庭住址"></van-cell>
    <van-cell  is-link  label="我就是我不一样的烟火" title="个性留言"></van-cell> -->
  </div>
</template>

<script>
import request from '@/utils/request'
import { getImg } from '@/api/article'
import { Toast } from 'vant'
export default {
  name: 'editPaage',
  data () {
    return {
      userData: {
        id: '',
        username: '',
        mobile: '',
        sex: '',
        birthday: '',
        address: '',
        notes: '',
        password: '',
        icon: ''
      },
      fileList: [],
      pic: ''
    }
  },
  async created () {
    const res = await request.get('/user/getUserInfo')
    this.userData.username = res.data.userInfo.username
    this.userData.mobile = res.data.userInfo.mobile
    this.userData.sex = res.data.userInfo.sex ? '女' : '男'
    this.userData.birthday = res.data.userInfo.birthday
    this.userData.address = res.data.userInfo.address
    this.userData.notes = res.data.userInfo.notes
    this.userData.password = res.data.userInfo.password
    this.userData.id = res.data.userInfo.id
    this.userData.icon = res.data.userInfo.icon
  },
  methods: {
    submit () {
      this.$store.dispatch('user/updateUser', {
        id: this.userData.id,
        username: this.userData.username,
        mobile: this.userData.mobile,
        sex: this.userData.sex,
        birthday: this.userData.birthday,
        address: this.userData.address,
        notes: this.userData.notes,
        password: this.userData.password,
        icon: this.userData.icon
      })
      Toast.success('修改成功')
    },
    async afterRead (file) {
      console.log(file)
      const fd = new FormData()
      fd.append('file', file.file, file.file.name)

      const res = await getImg(fd)

      this.userData.icon = res.data.savePath
    },
    updateImg () {
      this.$refs.pic.chooseFile()
    }
  }

}
</script>

<style lang="less" scoped>
  .van-cell{
    font-size: 18px;
  }
  /deep/.van-field__control{
    text-align: right;
  }
</style>
